<template>
  <div style="height: 100%; width: 100%" class="workspace">
    <el-container
      class="blod"
      ref="listWarp"
      style="height: 100%; background-color: #fafafa"
    >
      <div style="height: 100%; width: 100%">
        <el-row :gutter="20" style="width: 100%; height: 210px">
          <el-col :span="6" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%; padding: 0; position: relative"
            >
              <div style="width: 100%">
                <div class="flex" style="padding-top: 10px; margin: 0 10px">
                  今日
                  <svg-icon
                    style="font-size: 20px; margin-left: 10px"
                    icon-class="xiaolian"
                  />
                </div>
                <div style="font-size: 12px; color: #666666; margin: 0 10px">
                  {{ nowDate }}{{ nowWeek }}，欢迎您回到智慧后勤门户
                </div>
                <div style="padding-top: 20px; margin: 0 10px">
                  <div style="color: #333333; font-size: 14px">
                    <span style="width: 60px; display: inline-block"
                      >用户名：</span
                    >
                    {{ applyForm.name }}
                  </div>
                  <div style="color: #666666; font-size: 14px">
                    <span
                      style="
                        width: 60px;
                        display: inline-block;
                        letter-spacing: 3px;
                      "
                      >账 号：</span
                    >
                    {{ applyForm.account }}
                  </div>
                </div>
              </div>
              <div class="bot">
                <div
                  style="
                    color: #999999;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  <svg-icon
                    style="font-size: 15px; margin: 0 10px"
                    icon-class="shijian"
                  />
                  <span>最后一次登录时间：{{ nowDate }}{{ nowWeek }}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="9" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading5"
            >
              <p class="head-title">
                <span style="float: left">我的待办</span>
                <span
                  style="float: right"
                  @click="$router.push('transactionCenter')"
                >
                  更多
                  <i class="el-icon-arrow-right"></i>
                </span>
              </p>
              <div
                style="
                  width: 100%;
                  height: calc(100% - 36px);
                  display: flex;
                  flex-flow: row wrap;
                  align-content: flex-start;
                "
                v-if="systemPersonalWait.length != 0"
              >
                <a
                  style="
                    box-sizing: border-box;
                    width: 28%;
                    text-align: center;
                    border: 1px solid #f2f2f2;
                    padding: 10px;
                    cursor: pointer;
                    float: left;
                    margin: 7px 10px;
                    text-decoration: none;
                    color: #333;
                  "
                  :href="$itsoftUI.config.systemUrl + item.pcUrl"
                  target="_blank"
                  v-for="(item, index) in systemPersonalWait"
                  :key="index"
                  class="bank"
                  @click="FormVisible = true"
                >
                  <div
                    style="
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                  >
                    {{ item.agencyName }}
                  </div>
                  <div style="font-size: 18px; font-weight: blod">
                    {{ item.numbers }}
                  </div>
                </a>
              </div>
              <!-- <div
                class="grid-content bg-purple flex"
                style="width:100%;height:calc(100% - 36px);justify-content: center;"
                v-else
              >
                <div>
                  <img src="../../assets/image/kong.png" alt srcset />
                </div>
              </div>-->
            </div>
          </el-col>
          <el-col :span="9" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading4"
            >
              <p class="head-title">
                <span style="float: left">消息提醒</span>
                <span
                  style="float: right"
                  @click="$router.push('messageCenter')"
                >
                  更多
                  <i class="el-icon-arrow-right"></i>
                </span>
              </p>
              <div
                style="width: 100%; height: calc(100% - 36px)"
                v-if="listMessageList.length != 0"
              >
                <!-- {{listMessageList}} -->
                <p
                  style="padding: 0 10px; margin: 11px 0; cursor: pointer"
                  class="flex link"
                  v-for="(item, index) in listMessageList"
                  :key="index"
                  @click="showMessage(item)"
                >
                  <!-- <i
                    style="display: inline-block;width: 5px;height: 5px;border-radius: 50%;background-color: red;margin: 0px 8px;"
                  ></i>-->
                  <img
                    src="../../assets/img/tixing.png"
                    style="margin: 0px 8px"
                    alt
                    srcset
                  />
                  <span
                    style="
                      width: 64%;
                      display: inline-block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >{{ item.content }}</span
                  >
                  <span
                    style="
                      display: inline-block;
                      float: right;
                      margin-left: 15px;
                      color: #666;
                    "
                    class="mess"
                    >{{ item.sendTime }}</span
                  >
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="width: 100%; height: 255px">
          <el-col :span="15" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading"
            >
              <p class="head-title" style="border: none">
                <span style="float: left">推荐服务</span>
                <span
                  style="float: right"
                  @click="$router.push('applicationCenter?type=0')"
                >
                  更多
                  <i class="el-icon-arrow-right"></i>
                </span>
              </p>
              <div
                v-if="personalApplication1.length <= 2"
                style="width: 100%; height: calc(100% - 36px)"
              >
                <div
                  v-for="(item, index) in personalApplication1"
                  :key="index"
                  style="
                    width: 33%;
                    float: left;
                    border: 1px solid #ececf0;
                    height: 49%;
                    display: flex;
                  "
                  class="box td"
                  @click="save(item)"
                >
                  <div
                    style="
                      width: 100%;
                      cursor: pointer;
                      justify-content: space-around;
                      text-decoration: none;
                    "
                    class="bor flex"
                  >
                    <div style="margin-left: 15px">
                      <img
                        style="width: 40px; height: 40px"
                        :src="$itsoftUI.config.fileImgUrl + item.pcIcon"
                        alt
                        srcset
                      />
                    </div>
                    <div style="width: 70%">
                      <span
                        style="display: block; color: #333333; text-align: left"
                        >{{ item.name }}</span
                      >
                      <span
                        style="
                          display: block;
                          color: #666666;
                          font-size: 12px;
                          text-align: left;
                        "
                        >{{ item.remarks }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              <table
                v-else
                class="table"
                cellspacing="0"
                cellpadding="0"
                style="width: 100%; height: calc(100% - 36px)"
              >
                <tbody>
                  <tr style="height: 50%">
                    <td
                      style="width: 33%"
                      class="td"
                      v-for="(item, index) in personalApplication1.slice(0, 3)"
                      :key="index"
                      @click="save(item)"
                    >
                      <div
                        style="
                          width: 100%;
                          cursor: pointer;
                          justify-content: space-around;
                          text-decoration: none;
                        "
                        class="bor flex"
                      >
                        <div style="margin-left: 15px">
                          <img
                            style="width: 40px; height: 40px"
                            :src="$itsoftUI.config.fileImgUrl + item.pcIcon"
                            alt
                            srcset
                          />
                        </div>
                        <div style="width: 70%">
                          <span
                            style="
                              display: block;
                              color: #333333;
                              text-align: left;
                            "
                            >{{ item.name }}</span
                          >
                          <span
                            style="
                              display: block;
                              color: #666666;
                              font-size: 12px;
                              text-align: left;
                            "
                            >{{ item.remarks }}</span
                          >
                        </div>
                      </div>
                    </td>
                    <!-- <td style="width:33%"></td>
                    <td style="width:33%"></td>-->
                  </tr>
                  <tr style="height: 50%">
                    <td
                      style="width: 33%"
                      v-for="(item, index) in personalApplication1.slice(3, 6)"
                      :key="index"
                      class="td"
                      @click="save(item)"
                    >
                      <div
                        style="
                          width: 100%;
                          cursor: pointer;
                          justify-content: space-around;
                          text-decoration: none;
                        "
                        class="bor flex"
                      >
                        <div style="margin-left: 15px">
                          <img
                            style="width: 40px; height: 40px"
                            :src="$itsoftUI.config.fileImgUrl + item.pcIcon"
                            alt
                            srcset
                          />
                        </div>
                        <div style="width: 70%">
                          <span
                            style="
                              display: block;
                              color: #333333;
                              text-align: left;
                            "
                            >{{ item.name }}</span
                          >
                          <span
                            style="
                              display: block;
                              color: #666666;
                              font-size: 12px;
                              text-align: left;
                            "
                            >{{ item.remarks }}</span
                          >
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-col>
          <el-col :span="9" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading1"
            >
              <p class="head-title">
                <span style="float: left">最近浏览</span>
                <!-- <span style="float:right">
                  更多
                  <i class="el-icon-arrow-right"></i>
                </span>-->
              </p>

              <div
                style="
                  width: 100%;
                  height: calc(100% - 36px);
                  display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                "
                v-if="ApplicationRecent.length != 0"
              >
                <div
                  style="
                    width: 28%;
                    height: 33%;
                    text-align: center;
                    background-color: #fafafa;
                    cursor: pointer;
                    float: left;
                    margin: 0 10px;
                  "
                  class="flex bank"
                  v-for="(item, index) in ApplicationRecent"
                  :key="index"
                >
                  <a
                    :href="$itsoftUI.config.systemUrl + item.pcUrl"
                    target="_blank"
                    class="flex"
                    rel="noopener noreferrer"
                    style="
                      text-decoration: none;
                      width: 100%;
                      height: 100%;
                      text-align: center;
                      background-color: #fafafa;
                      cursor: pointer;
                    "
                  >
                    <div style="margin: 0 10px">
                      <svg-icon style="font-size: 20px" icon-class="mrtb" />
                    </div>
                    <div
                      style="
                        width: 80%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      <span
                        style="
                          width: 100%;
                          display: block;
                          color: #333333;
                          text-align: left;
                          display: inline-block;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.name }}</span
                      >
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="width: 100%; height: 255px">
          <el-col :span="15" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading2"
            >
              <p class="head-title">
                <span style="float: left">授权应用</span>
                <span
                  style="float: right"
                  @click="$router.push('applicationCenter?type=1')"
                >
                  更多
                  <i class="el-icon-arrow-right"></i>
                </span>
              </p>
              <div
                style="
                  width: 100%;
                  height: calc(100% - 36px);
                  flex-wrap: wrap;
                  display: flex;
                "
                class
                v-if="personalApplication.length != 0"
              >
                <div
                  rel="noopener noreferrer"
                  style="
                    display: inline-block;
                    width: 20%;
                    text-decoration: none;
                    height: 48%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                  v-for="(item, index) in personalApplication.slice(0, 10)"
                  :key="index"
                  @click="save(item)"
                  class="img"
                >
                  <div style="text-align: center; cursor: pointer">
                    <div>
                      <img
                        style="width: 40px; height: 40px"
                        :src="$itsoftUI.config.fileImgUrl + item.pcIcon"
                        alt
                        srcset
                      />
                    </div>
                    <div style="color: #333">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="9" style="height: 100%">
            <div
              class="grid-content bg-purple"
              style="height: 100%"
              v-loading="loading3"
            >
              <p class="head-title">
                <span style="float: left">常见问题</span>
                <a
                  style="float: right; text-decoration: none; color: #333"
                  target="_blank"
                  :href="$itsoftUI.config.helpUrl"
                >
                  更多
                  <i class="el-icon-arrow-right"></i>
                </a>
              </p>
              <div
                style="width: 100%; height: calc(100% - 36px)"
                v-if="allByUserList.length != 0"
              >
                <a
                  style="
                    padding: 0 10px;
                    margin: 8px 0;
                    cursor: pointer;
                    text-decoration: none;
                    color: #333;
                  "
                  class="flex link"
                  target="_blank"
                  v-for="(item, index) in allByUserList.slice(0, 7)"
                  :key="index"
                  :href="
                    $itsoftUI.config.helpUrl +
                    '/searchValue?code=' +
                    item.moduleId +
                    '&systemCode=' +
                    item.systemCode
                  "
                >
                  <img
                    src="../../assets/img/xiushi.png"
                    style="margin: 0px 8px"
                    alt
                    srcset
                  />
                  <span
                    style="
                      width: 67%;
                      margin-right: 38px;
                      display: inline-block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >【{{ item.moduleName }}】 {{ item.title }}</span
                  >

                  <span
                    style="
                      display: inline-block;
                      float: right;
                      margin-left: 15px;
                      width: 100px;
                      color: #666;
                    "
                    >{{ $moment(item.time).format("YYYY-MM-DD") }}</span
                  >
                </a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-dialog
      title="消息详情"
      :visible.sync="dialogFormVisible"
      width="650px"
      :append-to-body="true"
      lock-scroll
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <div class="win-warp" style="height: 300px; padding: 0 25px">
        <p style="font-size: 16px">{{ messCon.title }}</p>
        <p>{{ messCon.content }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { indexApi } from "@/api/home/index";
import { messageCenterApi } from "@/api/home/messageCenter";
export default {
  name: "index",
  data() {
    return {
      dialogFormVisible: false,
      messCon: {},
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      FormVisible: false,
      buildingList: [],
      roomList: [],
      itemList: [],
      optionalBatchList: [],
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      personnel: [],
      applyForm: {},
      userInfo: {},
      isCheckBuildingIdFlag: false,
      //最近浏览
      ApplicationRecent: [],
      //应用
      personalApplication: [],
      //待办
      systemPersonalWait: [],
      //推荐服务
      personalApplication1: [],
      // 常见问题
      allByUserList: [],
      //消息
      listMessageList: [],
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  methods: {
    save(item) {
      let form = {
        userId: this.userInfo.id,
        applicationId: item.id,
      };
      indexApi.Save(JSON.stringify(form)).then(() => {
        this.getApplicationRecentList();
        let blank = item.openType == 1 ? "_blank" : "_self";
        let urlList = item.pcUrl.split("/");
        if (urlList[1] == "formGenerator") {
          indexApi.checkUserRole(urlList[urlList.length - 1]).then((res) => {
            if (res.errorCode == "1") {
              window.open(
                this.$itsoftUI.config.systemUrl +
                  item.pcUrl +
                  `?redirect=${this.$itsoftUI.config.localUrl}`,
                "_blank"
              );
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          window.open(this.$itsoftUI.config.systemUrl + item.pcUrl, blank);
        }
      });
    },
    showMessage(item) {
      this.dialogFormVisible = true;
      this.messCon = item;
      let status = "0";
      messageCenterApi.StatusMessage(status, item.id).then(() => {});
    },
    setNowTimes() {
      let myDate = new Date();
      // console.log(myDate)
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "-" + mm + "-" + dd;
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },

    getUserInfo() {
      this.$itsoftUI.getUserInfo().then((res) => {
        this.userInfo = res;
        this.applyForm.account = res.account;
        this.applyForm.name = res.name;
      });
    },

    //判断有无选择楼宇
    isCheckBuildingId() {
      if (!this.applyForm.buildingId) {
        this.isCheckBuildingIdFlag = true;
      } else {
        this.isCheckBuildingIdFlag = false;
      }
    },
    // 最近浏览数据
    getApplicationRecentList() {
      this.loading1 = true;
      indexApi.applicationRecentList().then((res) => {
        if (res.status === "success") {
          this.ApplicationRecent = res.data;
          console.log(this.ApplicationRecent);
          this.loading1 = false;
        }
      });
    },
    //应用
    getPersonalApplicationList() {
      let type = 1;
      this.loading2 = true;
      indexApi.personalApplicationList(type).then((res) => {
        if (res.status === "success") {
          this.personalApplication = res.data;
          this.loading2 = false;
        }
      });
    },
    //待办
    getsystemPersonalWaitList() {
      let size = 6;
      this.loading5 = true;
      indexApi.systemPersonalWaitList(size).then((res) => {
        if (res.status === "success") {
          this.systemPersonalWait = res.data;
          this.loading5 = false;
        }
      });
    },
    //应用
    getPersonalApplicationList1() {
      let type = 0;
      this.loading = true;
      indexApi.personalApplicationList(type).then((res) => {
        if (res.status === "success") {
          this.personalApplication1 = res.data;
          this.loading = false;
        }
      });
    },
    //常见问题
    getAllByUserId() {
      this.loading3 = true;
      indexApi.getAllByUserId().then((res) => {
        if (res.status === "success") {
          this.allByUserList = res.data.rows;
          this.loading3 = false;
        }
      });
    },
    //消息
    listMessage() {
      let pageIndex = 1;
      let pageSize = 5;
      this.loading4 = true;
      indexApi.listMessage(pageIndex, pageSize).then((res) => {
        if (res.status === "success") {
          this.listMessageList = res.data.rows;
          this.loading4 = false;
        }
      });
    },
  },
  created() {
    this.getUserInfo();
    this.getApplicationRecentList();
    this.getPersonalApplicationList();
    this.getsystemPersonalWaitList();
    this.getPersonalApplicationList1();
    this.listMessage();
    this.getAllByUserId();
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.td {
  position: relative;
}

.img:hover {
  transform: scale(1.05);
}

.td:after {
  content: " ";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: block;
  width: 100%;
  height: 1px;
  transform: translate(-50%);
}

.td:hover:after {
  height: 2px;
  animation: ad_width 0.5s linear forwards;
  background: #ff8a00;
}

@keyframes ad_width {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.bank:hover {
  box-shadow: 2px 3px 12px 0 rgba(170, 170, 170, 0.35);
}

.td:hover {
  box-shadow: 2px 3px 12px 0 rgba(170, 170, 170, 0.35);
}

.table thead tr th,
.table tbody tr td {
  padding: 8px 12px;
  text-align: center;
  color: #333;
  border: 1px solid #ececf0;
  border-collapse: collapse;
  background-color: #fff;
}

.bor {
  // &:nth-child(2) {
  //   border: none !important;
  // }
  //  &:nth-child(4) {
  //   border: none !important;
  // }
}

.link:hover {
  cursor: pointer;
  color: rgb(243, 76, 21) !important;

  span {
    color: rgb(243, 76, 21) !important;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.bot {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #eeeeee;
}

.head-title {
  padding: 10px 10px;
  border-bottom: 1px solid #ececf0;
  height: 15px;
  line-height: 15px;
  margin: 0;

  span {
    &:first-child {
      border-left: 2px solid #f34c15;
      text-indent: 8px;
    }

    &:last-child {
      cursor: pointer;
    }
  }
}

.btn {
  background-image: linear-gradient(to right, #fbaf07, #f57a0d);
  // background: none;
  border: none;
}

.blod {
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.box {
  &:first-child {
    // border-right: no;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #fff;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  box-shadow: 2px 3px 12px 0 rgb(241, 240, 240);
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.itemError {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
}

.mess {
  width: 160px;
}

@media screen and (min-width: 1000px) and (max-width: 1300px) {
  .mess {
    width: 190px;
  }

  .bank {
    width: 26% !important;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1920px) {
  .bank {
    width: 29% !important;
  }
}
</style>
